<template>
    <view class="container">
        <view class="product_main">
            <view class="pro-left">
                <image :src="easyGetImgUrl(data.ThumbnailUrl50)" mode="aspectFill"></image>
                <view class="pro-name text-show-line-2">{{ data.ProductName }}</view>
            </view>
            <view class="pro-right" @click="select">
                <view v-show="!data.checked">选择</view>
                <view class="disabled" v-show="data.checked">已选</view>
            </view>
        </view>
    </view>
</template>

<script>
import { SendCouponToUser } from "@/service/api/coupon.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        seletData: {
            type: Array,
            default: [],
        },
        index: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            show: true,
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        select() {
            if (this.seletData.length == 5 && this.data.checked) {
                this.data.checked = !this.data.checked
                this.$forceUpdate()
                this.$emit("select", this.data)
                return
            }
            if (this.seletData.length < 5) {
                this.$nextTick((e) => {
                    this.data.checked = !this.data.checked
                    this.$emit("select", this.data, this.index)
                })

                this.$forceUpdate()
            } else {
                this.easyToast("最多只能选择5个商品")
                return
            }
        },
    },
}
</script>

<style lang="scss">
.product_main {
    background: #ffffff;
    display: flex;
    padding: 24rpx;
    align-items: center;
    justify-content: space-between;
    .pro-left {
        display: flex;
        flex: 1;
        align-items: center;
    }
    image {
        width: 144rpx;
        height: 144rpx;
        border-radius: 16rpx;
        margin-right: 26rpx;
    }
    .pro-name {
        font-size: 28rpx;
        flex: 1;
        font-weight: bold;
        color: $color-gray-1;
    }
    .pro-right {
        padding-left: 40rpx;
        view {
            width: 120rpx;
            height: 52rpx;
            background: $app-color-main;
            border-radius: 26rpx;
            font-size: 24rpx;
            color: #ffffff;
            text-align: center;
            line-height: 52rpx;
        }
        .disabled {
            background: #cccccc;
        }
    }
}
</style>
